<template>
	<view class="login-container">
		<!-- 渐变背景 -->
		<view class="gradient-bg"></view>
		
		<!-- 登录卡片 -->
		<view class="login-card">
			<!-- 标题区域 -->
			<view class="title-section">
				<text class="welcome-title">欢迎回来</text>
				<text class="welcome-subtitle">请登录您的账号</text>
			</view>
			
			<!-- 表单区域 -->
			<view class="form-section">
				<!-- 用户名输入框 -->
				<view class="input-group">
					<view class="input-wrapper">
						<view class="input-icon">
							<text class="iconfont icon-user">👤</text>
						</view>
						<input 
							v-model="form.phone" 
							placeholder="请输入手机号或用户名" 
							class="input-field"
							type="text"
						/>
					</view>
				</view>
				
				<!-- 密码输入框 -->
				<view class="input-group">
					<view class="input-wrapper">
						<view class="input-icon" @click="togglePasswordVisibility">
							<text class="password-icon">{{ showPassword ? '🔓' : '🔒' }}</text>
						</view>
						<input 
							v-model="form.password" 
							placeholder="请输入密码" 
							class="input-field"
							:type="showPassword ? 'text' : 'password'"
						/>
					</view>
				</view>
				
				<!-- 记住我和忘记密码 -->
				<view class="options-row">
					<view class="remember-me" @click="toggleRemember">
						<view class="checkbox" :class="{ 'checked': rememberMe }">
							<text v-if="rememberMe" class="checkmark">✓</text>
						</view>
						<text class="remember-text">记住我</text>
					</view>
					<text class="forgot-password" @click="forgetPassWord">忘记密码？</text>
				</view>
				
				<!-- 登录按钮 -->
				<view class="login-btn" @click="submit">
					<text class="login-btn-text">登录</text>
				</view>
				
				<!-- 注册链接 -->
				<view class="register-section">
					<text class="register-text">还没有账号？</text>
					<text class="register-link" @click="register">立即注册</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import localStorage from '@/utils/storage.js'

export default {
	data() {
		return {
			form: {
				phone: '',
				password: '',
			},
			rememberMe: false,
			showPassword: false,
			rules: {
				phone: [
					{ 
						required: true, 
						message: '请输入帐号', 
						trigger: ['change','blur'],
					}
				],
				password: [
					{
						required: true,
						message: '请输入密码', 
						trigger: ['change','blur'],
					}
				]
			}
		};
	},
	methods: {
		toggleRemember() {
			this.rememberMe = !this.rememberMe;
		},
		togglePasswordVisibility() {
			this.showPassword = !this.showPassword;
		},
		submit() {
			if (!this.form.phone) {
				uni.showToast({
					title: '请输入手机号或用户名',
					icon: 'none'
				});
				return;
			}
			if (!this.form.password) {
				uni.showToast({
					title: '请输入密码',
					icon: 'none'
				});
				return;
			}
			
			// 调用本地存储登录
			const result = localStorage.login(this.form.phone, this.form.password);
			
			if (result.success) {
				uni.showToast({
					title: result.message,
					icon: 'success'
				});
				
				// 记住账号
				if (this.rememberMe) {
					uni.setStorageSync('rememberedAccount', this.form.phone);
				}
				
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index/index'
					});
				}, 1500);
			} else {
				uni.showToast({
					title: result.message,
					icon: 'none'
				});
			}
		},
		register(){
			uni.navigateTo({
				url: '/pages/public/register'
			});
		},
		forgetPassWord(){
			uni.navigateTo({
				url: '/pages/public/forget_password'
			});
		}
	},
	onLoad() {
		// 如果有记住的账号，自动填入
		const rememberedAccount = uni.getStorageSync('rememberedAccount');
		if (rememberedAccount) {
			this.form.phone = rememberedAccount;
			this.rememberMe = true;
		}
		
		// 检查是否已经登录
		if (localStorage.isLoggedIn()) {
			uni.switchTab({
				url: '/pages/index/index'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.login-container {
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;
}

.gradient-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #a6c0fe 0%, #f68084 100%);
	z-index: 0;
}

.login-card {
	position: relative;
	z-index: 1;
	width: 680rpx;
	margin: 0 auto;
	margin-top: 280rpx;
	background: #ffffff;
	border-radius: 40rpx;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
	padding: 80rpx 60rpx 60rpx;
}

.title-section {
	text-align: center;
	margin-bottom: 80rpx;
}

.welcome-title {
	display: block;
	font-size: 48rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 20rpx;
}

.welcome-subtitle {
	display: block;
	font-size: 28rpx;
	color: #666;
}

.form-section {
	width: 100%;
}

.input-group {
	margin-bottom: 40rpx;
}

.input-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	background: #f8f9fa;
	border-radius: 25rpx;
	padding: 0 30rpx;
	height: 100rpx;
	border: 2rpx solid transparent;
	transition: all 0.3s ease;
}

.input-wrapper:focus-within {
	border-color: #a6c0fe;
	background: #ffffff;
	box-shadow: 0 0 20rpx rgba(166, 192, 254, 0.3);
}

.input-icon {
	margin-right: 20rpx;
	font-size: 36rpx;
	color: #999;
	cursor: pointer;
}

.password-icon {
	transition: all 0.3s ease;
}

.input-field {
	flex: 1;
	font-size: 32rpx;
	color: #333;
	background: transparent;
	border: none;
	outline: none;
}

.input-field::placeholder {
	color: #999;
}

.options-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 60rpx;
}

.remember-me {
	display: flex;
	align-items: center;
}

.checkbox {
	width: 36rpx;
	height: 36rpx;
	border: 2rpx solid #ddd;
	border-radius: 8rpx;
	margin-right: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.checkbox.checked {
	background: #a6c0fe;
	border-color: #a6c0fe;
}

.checkmark {
	color: #fff;
	font-size: 24rpx;
	font-weight: bold;
}

.remember-text {
	font-size: 28rpx;
	color: #666;
}

.forgot-password {
	font-size: 28rpx;
	color: #a6c0fe;
}

.login-btn {
	width: 100%;
	height: 100rpx;
	background: linear-gradient(135deg, #a6c0fe 0%, #f68084 100%);
	border-radius: 25rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 40rpx;
	box-shadow: 0 10rpx 30rpx rgba(166, 192, 254, 0.4);
	transition: all 0.3s ease;
}

.login-btn:active {
	transform: translateY(2rpx);
	box-shadow: 0 8rpx 25rpx rgba(166, 192, 254, 0.3);
}

.login-btn-text {
	font-size: 32rpx;
	color: #fff;
	font-weight: 600;
}

.register-section {
	text-align: center;
}

.register-text {
	font-size: 28rpx;
	color: #666;
	margin-right: 10rpx;
}

.register-link {
	font-size: 28rpx;
	color: #a6c0fe;
	font-weight: 500;
}
</style>